<!doctype html>
<html>
  <head>
    <title>hoge</title>
    <script src="/javascripts/jquery-1.6.1.min.js"></script>
    <script src="/javascripts/underscore.js"></script>
    <style>
      div.box {
        width:400px; height:300px;border:1px solid gray;position:relative;
      }
      div.point {
        width:5px;height:5px;background:red;position:absolute;
        -webkit-transition: 2.5s ease-in;
      }
      div.point[data-state=remove]{
        opacity:0.05;
      }
    </style>
  </head>
  <body>
    <div class=box></div>
    <div class=box></div>

    <script>
      $("div.box").mousemove(function(e){
        var x = e.clientX, y = e.clientY;
        var pointer = $('<div>');
        pointer.addClass('point').css({left:x,top:y})
          .appendTo("div.box");
        _.defer(function(){
          pointer.attr("data-state", "remove").css("top",y+100);
          _.delay(function(){pointer.remove()},2500);
        });

      });
    </script>
  </body>
</html>
